<template>
  <div>
    <BasicTable @register="registerTable" >
      <template #tableTitle>
        <a-button type="primary" @click="handleForm(false, {})" :disabled="isDisabledAuth(Auth.saveSysConfigTmpl)" >
          <Icon icon="i-ant-design:plus-outlined" /> {{ t('新增') }}
        </a-button>

        <a-button type="primary" preIcon="ant-design:import-outlined" @click="handleImport">
          导入
        </a-button>
      </template>

    </BasicTable>
    <InputForm @register="registerInputForm" @success="handleSuccess" />
    <ImportTmpl @register="registerImport" @success="reload" />

  </div>
</template>
<script lang="ts" name="SysConfigTmpl" setup>
import { unref } from 'vue';
import { Auth } from '/@/enums/authEnum'
import { BasicTable, BasicColumn, useTable } from '/@/components/Table';
import { useDrawer } from '/@/components/Drawer';
import { useI18n } from '/@/hooks/web/useI18n';
import { usePermission } from '/@/hooks/web/usePermission';
import { useGlobSetting } from '/@/hooks/setting';
import { columns, searchFormSchema } from './data';
import * as configTmplApi from '/@/api/infra/configTmpl';
import { useMessage } from '/@/hooks/web/useMessage';
import InputForm from './form.vue';
import ImportTmpl from './components/ImportTmpl.vue';
import { Icon } from '/@/components/Icon';
import { useCopyToClipboard } from "/@/hooks/web/useCopyToClipboard";

const [registerImport, { openDrawer: openImport }] = useDrawer();
const { clipboardRef, copiedRef } = useCopyToClipboard();
const { t } = useI18n('');
const { createMessage } = useMessage();
const glob = useGlobSetting();
const { isDisabledAuth } = usePermission()
const [registerInputForm, { openDrawer: openInputForm }] = useDrawer();

const actionColumn: BasicColumn = {
  width: 130,
  title: '操作',
  dataIndex: 'action',
  fixed: 'right',
  slot: 'tableActions',
  actions:  (record: Recordable) => [
    {
      label: '删除',
      color: 'error',
      disabled: !record.canWrite,
      auth: Auth.deleteSysConfigTmpl,
      popConfirm: {
        title: '是否确认删除',
        confirm: handleDelete.bind(null, record),
      },
    },
    {
      label: '编辑',
      auth: Auth.updateSysConfigTmpl,
      onClick: handleForm.bind(null, true, record),
    },
    {
      label: "复制",
      onClick: handleCopy.bind(null, record),
    },
  ],
  dropDownActions: (record: Recordable) => [
    
  ]
}

const [registerTable, { reload }] = useTable({
  title: '配置模板',
  api: configTmplApi.listTmpl,
  columns: columns,
  bordered: false,
  beforeFetch: (params) => {
    return params;
  },
  formConfig: {
    baseColProps: { lg: 6, md: 12 },
    labelWidth: 60,
    schemas: searchFormSchema,
    showResetButton: false,
  },
  showTableSetting: false,
  showIndexColumn: false,
  useSearchForm: true,
  pagination: false,
  canResize: true,
  rowKey: 'configKey',
  actionColumn,
})

const handleForm = (isUpdate, record) => openInputForm(true, { record, isUpdate });
const handleDelete = async (record) => await configTmplApi.deleteTmpl({ configKey: record.configKey }, reload)
const handleSuccess = () => reload()
const handleImport = () => openImport(true, { });

const handleCopy = async (record) => {
  clipboardRef.value = "";
  createMessage.loading({
    content: "复制中...",
    key: "loading",
    duration: 0
  });

  try {
    const data = await configTmplApi.getCopyTmpl({ configKey: record.configKey });
    clipboardRef.value = JSON.stringify(data, null, 2);
    if (unref(copiedRef)) {
      createMessage.success(`所选配置模板【${record.name}】已保存到剪切板`);
    } else {
      createMessage.success("复制失败");
    }
  } finally {
    createMessage.destroy("loading");
  }
}

</script>
